<!-- TODO -->
<template>
    <div>
        <!-- header -->
        <el-card class="!border-none" shadow="never">
           <!-- <el-alert type="warning" :closable="false" show-icon>
                <template #title>
                    1、商城团长管理列表<br />
                    2、关闭团长后，自提点将无法再次被选择，请谨慎操作。<br />
                    3、产生订单数据的团长将无法被删除；删除团长后，将无法恢复，请谨慎操作。
                </template>
            </el-alert> -->
            <el-form ref="formRef" class="mb-[-16px] mt-[15px]" :inline="true" :model="queryParams">
                <el-form-item label="用户关联搜索">
                    <el-input
                        class="w-[240px] h-[32px]"
                        placeholder="请输入用户姓名/昵称/手机号"
                        v-model="queryParams.user_keyword"
                        clearable
                    />
                </el-form-item>
				<el-form-item label="用户ID">
				    <el-input
				        class="w-[240px] h-[32px]"
				        placeholder="请输入用户ID"
				        v-model="queryParams.uuid"
				        clearable
				    />
				</el-form-item>
                <el-form-item label="姓名">
                    <el-input
                        class="w-[240px] h-[32px]"
                        placeholder="请输入姓名"
                        v-model="queryParams.name"
                        clearable
                    />
                </el-form-item>
				<el-form-item label="手机号">
				    <el-input
				        class="w-[240px] h-[32px]"
				        placeholder="请输入手机号"
				        v-model="queryParams.phone"
				        clearable
				    />
				</el-form-item>
				<el-form-item label="社区名称">
				    <el-input
				        class="w-[240px] h-[32px]"
				        placeholder="请输入社区名称"
				        v-model="queryParams.community_name"
				        clearable
				    />
				</el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <router-link
                :to="{
                    path: '/leader/lists/edit'
                }"
            >
                <el-button type="primary"> 新增团长 </el-button>
            </router-link>

            <el-table size="large" class="mt-[14px]" :data="pager.lists">

                <el-table-column label="申请用户ID / 昵称" min-width="150">
                    <template #default="{ row }">
                        <span>{{ row.uuid }}/{{ row.nickname }}</span>

                    </template>
                </el-table-column>
               <el-table-column label="姓名 / 手机号 / 社区名称" min-width="150">
                   <template #default="{ row }">
                       <span>{{ row.username }}/{{ row.phone }}/{{row.community_name}}</span>
                   </template>
               </el-table-column>
			   <el-table-column label="门头照片" min-width="120">
			       <template #default="{ row }">
			           <el-image
			               style="width: 60px; height: 60px"
			               :src="row.image"
			               :preview-src-list="[row.image]"
			               :hide-on-click-modal="true"
			               :preview-teleported="true"
			               :fit="'cover'"
			           >
			           </el-image>
					</template>
			   </el-table-column>
                <el-table-column label="用户数量">
                    <template #default="{ row }">
                        <span> {{row.user_count }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="成交金额">
                    <template #default="{ row }">
                        <span> {{ row.order_price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="鸡蛋余额">
                    <template #default="{ row }">
                        <span> {{row.balance2 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="提货地址" prop="sn" min-width="150">
                    <template #default="{ row }">
                        <span> {{ row.address_area}}{{row.address}}</span>
                    </template>
                </el-table-column>
               <!-- <el-table-column label="创建时间">
                    <template #default="{ row }">
                        <span :class="`${row.status == 1 ? '' : 'text-red'}`">{{
                            row.status_desc
                        }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="入驻时间" prop="create_time" /> -->
                <el-table-column label="操作" fixed="right" min-width="260">
                    <template #default="{ row }">
                        <router-link :to="{    path: '/leader/lists/edit',  query: {  id: row.id  }  }">
                            <el-button type="success" class="mt-[4px] mr-[4px]"> 编辑 </el-button>
                        </router-link>
                        <router-link :to="{    path: '/leader/list/extendOrder',  query: {  id: row.id  }  }">
                            <el-button type="info" class="mt-[4px] mr-[4px]"> 推广订单 </el-button>
                        </router-link>
                        <router-link :to="{    path: '/leader/list/earningsLog',  query: {  id: row.id  }  }">
                            <el-button type="info" class="mt-[4px] mx-[4px]"> 收益明细 </el-button>
                        </router-link>
                        <el-dropdown class="mt-[2px] ml-[12px]">
                            <el-button
                                    type="primary"
                            >
                                鸡蛋
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="eggNumberEdit(row.id, row.balance2, 1)"
                                    >增加鸡蛋</el-dropdown-item
                                    >
                                    <el-dropdown-item @click="eggNumberEdit(row.id, row.balance2, 0)"
                                    >减少鸡蛋</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
    <NumberPopup v-if="numberShow" ref="numberRef" @success="submitNum"  @close="numberShow = false" />
</template>

<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { newCommunityInfoList, Delteamhead, incBalance2, decBalance2 } from '@/api/teamhead'
import NumberPopup from './components/eggNumber.vue'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
import {deliverOrder, orderRedForOrder, sucallOrder} from "@/api/redPacket";

const queryParams = reactive({
    user_keyword: '',
    name: '',
    phone: '',
    community_name: '',
	uuid:''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: newCommunityInfoList,
    params: queryParams
})
getLists()

// 鸡蛋
const numberRef = shallowRef<InstanceType<typeof NumberPopup>>();
const numberShow = ref(false);
const eggNumberEdit = async (id: number, balance: number, state: number) => {
    numberShow.value = true;
    await nextTick();
    numberRef.value?.open();
    numberRef.value?.setFormData({id, balance, state})
}

// 提交数量
const submitNum = async (formData: any) => {
    formData.state ? await incBalance2(formData) : await decBalance2(formData)
    getLists()
};
</script>
<style lang="scss" scope>
//TODO
.el-alert--warning.is-light {
    background-color: rgba(246, 248, 255, 1);
    color: rgba(64, 115, 250, 1);
}
.text-red {
    color: red;
}
</style>
